<template>
  <div>
    <p>firstName: {{firstName}}</p>
    <p>lastName: {{lastName}}</p>
    <input type="text" v-model="fullName">
  </div>
</template>

<script>
import { computed, reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      firstName: '吴',
      lastName: '宇'
    })

    // !Vue2 中往一个对象中追加的数据不是响应式，Vue3 不存在这个问题
    /* state.fullName = computed(() => {
      return state.firstName + '~' + state.lastName
    }) */

    // 这种写法和上面等价
    state.fullName = computed({
      get() {
        return state.firstName + '~' + state.lastName
      },
      set(newFullName) {
        const [firstName, lastName] = newFullName.split('~')
        
        state.firstName = firstName
        state.lastName = lastName
      }
    })
  
    return {
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped>

</style>